<script setup>
import { ref, onMounted } from 'vue'
import { getNuataget, postResnuata } from '@/apis/apis.js'
import { showToast } from '@/utils/utils.js'
const name = ref('')
const phone = ref('')
const id_card = ref('')
const time = ref('')
const activeIndex = ref(-1)
const data = ref([])
const handleChangeDate = (item, index) => {
  console.log(item, index)
  activeIndex.value = index
  time.value = item.date
}
const handlePhoneCall = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone
  })
}
const handleSubmit = async () => {
  const data = {
    name: name.value,
    phone: phone.value,
    id_card: id_card.value,
    time: time.value
  }
  console.log(data)
  await postResnuata(data)
  showToast('预约成功')
  setTimeout(() => {
    uni.navigateTo({ url: '/pages/my-service/nucleic-acid/nucleic-acid' })
  }, 1000)
}
onMounted(async () => {
  const res = await getNuataget()
  data.value = res.data
  console.log(res)
})
</script>

<template>
  <view class="view" v-for="(item, index) in data" :key="index">
    <view class="view-detail">
      <view class="view-body">
        <image class="view-body-left" :src="item.logo" mode="aspectFill"></image>
        <view class="view-body-right">
          <view class="view-body-right-name">{{ item.name }}</view>
          <view class="view-body-right-price">￥{{ item.price }}</view>
        </view>
      </view>
      <view class="view-footer">
        <view class="view-footer-item" v-for="(boon, boonIndex) in item.boon" :key="boonIndex">
          <icon class="view-footer-item-image" type="success"></icon>
          <view class="view-footer-item-text">{{ boon }}</view>
        </view>
      </view>
    </view>
    <view class="view-link">
      <view class="view-link-left">
        <view class="view-link-left-name">{{ item.hospital }}</view>
        <view class="view-link-left-address">{{ item.address }}</view>
      </view>
      <view class="view-link-right" @click="handlePhoneCall(item.phone)">
        <image class="view-link-right-image" src="/static/images/dianhua.svg" mode="widthFix"></image>
        <view class="view-link-right-text">电话</view>
      </view>
    </view>
    <view class="view-form">
      <view class="view-form-item">
        <view class="view-form-item-label">真实姓名</view>
        <input class="view-form-item-input" v-model.trim="name" placeholder="请输入真实姓名" />
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">手机号</view>
        <input class="view-form-item-input" v-model.trim="phone" type="tel" placeholder="请输入手机号" />
      </view>
      <view class="view-form-item">
        <view class="view-form-item-label">身份证</view>
        <input class="view-form-item-input" v-model.trim="id_card" type="idcard" placeholder="请输入身份证" />
      </view>
    </view>
    <view class="view-date">
      <view class="view-date-title">选择预约时段</view>
      <scroll-view class="view-date-container" scroll-x enable-flex>
        <view class="view-date-item" :class="{ active: activeIndex === dateIndex }" v-for="(date, dateIndex) in item.date" :key="dateIndex" @click="handleChangeDate(date, dateIndex)">
          <view class="view-date-item-time">{{ date.date }}</view>
          <view class="view-date-item-text">{{ date.week }}</view>
        </view>
      </scroll-view>
    </view>
    <view class="view-attrs">
      <view class="view-attrs-title">咽拭子采样方式</view>
      <view class="view-attrs-body">
        <view class="view-attr" v-for="(style, styleIndex) in item.style" :key="styleIndex">
          <view class="view-attr-title">{{ style.title }}</view>
          <view class="view-attr-content" v-for="(desc, descIndex) in style.desc" :key="descIndex">{{ desc }}</view>
        </view>
      </view>
    </view>
    <view class="view-submit">
      <view class="view-submit-price">检测费用：￥{{ item.price }}</view>
      <view class="view-submit-button" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  position: relative;
  padding-bottom: 250rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-detail {
    padding: 30rpx;
    background-color: #fff;
    .view-body {
      display: flex;
      margin-bottom: 30rpx;
      .view-body-left {
        margin-right: 10rpx;
        width: 150rpx;
        height: 150rpx;
        background-color: pink;
      }
      .view-body-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .view-body-right-name {
          font-size: 40rpx;
          font-weight: bold;
        }
        .view-body-right-price {
          color: red;
          font-size: 36rpx;
          font-weight: bold;
        }
      }
    }
    .view-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .view-footer-item {
        display: flex;
        align-items: center;
        .view-footer-item-image {
          margin-right: 10rpx;
        }
      }
    }
  }
  .view-link {
    display: flex;
    justify-content: space-between;
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .view-link-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .view-link-left-name {
        font-size: 36rpx;
      }
    }
    .view-link-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .view-link-right-image {
        margin-bottom: 30rpx;
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
  .view-form {
    margin: 30rpx;
    padding: 0 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .view-form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40rpx 0;
      border-bottom: 1px solid #f8f8f8;
      .view-form-item-input {
        flex: 1;
        text-align: end;
      }
    }
  }
  .view-date {
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .view-date-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-date-container {
      display: flex;
      white-space: nowrap;
      .view-date-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
        padding: 2rpx 30rpx;
        border-radius: 10rpx;
        &.active {
          background-color: #5a91ff;
          color: #fff;
        }
      }
    }
  }
  .view-attrs {
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    .view-attrs-title {
      margin-bottom: 20rpx;
      font-weight: bold;
    }
    .view-attrs-body {
      .view-attr {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 40rpx;
        .view-attr-title {
          padding: 10rpx;
          background-color: #5a91ff;
          border-radius: 5rpx;
          color: #fff;
          font-size: 28rpx;
        }
        .view-attr-content {
          font-size: 28rpx;
        }
      }
    }
  }
  .view-submit {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
    width: 750rpx;
    background-color: #fff;
    .view-submit-price {
      color: red;
    }
    .view-submit-button {
      padding: 20rpx 50rpx;
      background-color: #5a91ff;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
